<template>
  <el-table
    ref="table"
    class="table"
    :height="height"
    :data="data"
    :stripe="stripe"
    :border="border"
    :size="size"
    :cell-style="cellStyle"
    :header-cell-style="headerCellStyle"
    :row-style="rowStyle"
    :row-key="getRowKey"
    :key="refreshKey"
    v-loading="loading"
    @select="selectRow"
    @selection-change="handleSelectionChange"
    @row-dblclick="handleRowDbClick"
    @row-click="handleRowClick"
    @expand-change="handleExpandChange"
    @current-change="handleCurrentChange"
    :row-class-name="tableRowClassName"
    highlight-current-row
  >
    <!-- 是否开启序号栏 -->
    <el-table-column
      v-if="isIndex && !isOrder"
      type="index"
      width="50"
      align="center"
    ></el-table-column>
    <el-table-column
      v-if="isOrder && isIndex"
      width="50"
      align="center"
      type="index"
    ></el-table-column>
    <!-- 是否开启复选框 -->
    <el-table-column
      v-if="selection"
      width="55"
      type="selection"
      align="center"
      reserve-selection
      :selectable="selectable"
    />
    <template v-if="autoFit">
      <af-table-column
        :type="item.type"
        :prop="item.prop"
        :label="isI18n ? $t(item.label) : item.label"
        v-for="item in columns"
        :key="item.prop"
        :sortable="item.sortable"
        :width="item.width"
        :fixed="item.fixed"
        :fontRate="item.fontRate"
        :align="item.align || 'center'"
      >
        <template #header>
          <slot v-if="item.slotHeader" :name="item.slotHeader"></slot>
          <span v-else>{{ isI18n ? $t(item.label) : item.label }}</span>
        </template>
        <template slot-scope="scope">
          <span v-if="item.render">{{ item.render(scope.row) }}</span>
          <slot
            v-else-if="item.slotName"
            :name="item.slotName"
            :scope="scope"
          ></slot>
          <span v-else>{{ scope.row[item.prop] }}</span>
        </template>
      </af-table-column>
    </template>
    <template v-else>
      <el-table-column
        :type="item.type"
        :prop="item.prop"
        :label="isI18n ? $t(item.label) : item.label"
        v-for="item in columns"
        :key="item.prop"
        :sortable="item.sortable"
        :width="item.width"
        :fixed="item.fixed"
        :align="item.align || 'center'"
      >
        <template #header>
          <slot v-if="item.slotHeader" :name="item.slotHeader"></slot>
          <span v-else>{{ isI18n ? $t(item.label) : item.label }}</span>
        </template>
        <template slot-scope="scope">
          <span v-if="item.render">{{ item.render(scope.row) }}</span>
          <slot
            v-else-if="item.slotName"
            :name="item.slotName"
            :scope="scope"
          ></slot>
          <span v-else>{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
    </template>
  </el-table>
</template>
<script>
export default {
  name: "SysTable",
  props: {
    columns: {
      type: Array,
      required: true,
      default: () => {
        return [];
      },
    },
    data: {
      type: Array,
      required: true,
      default: () => {
        return [];
      },
    },
    stripe: {
      type: Boolean,
      default: true,
    },
    border: {
      type: Boolean,
      default: false,
    },
    size: {
      type: String,
      default: "small",
    },
    loading: {
      type: Boolean,
      default: false,
    },
    selection: {
      type: Boolean,
      default: false,
    },
    isIndex: {
      type: Boolean,
      default: false,
    },
    isOrder: {
      type: Boolean,
      default: false,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
    pageIndex: {
      type: Number,
      default: 1,
    },
    height: {
      type: String,
      default: "calc(100% - 0px)",
    },
    loadingText: {
      type: String,
      default: "Loading...",
    },
    spiltIndex: {
      type: Number,
      default: 0,
    },
    rowKey: {
      type: Number | String,
      default: "id",
    },
    isI18n: {
      type: Boolean,
      default: false,
    },
    autoFit: {
      type: Boolean,
      default: false,
    },
    selectable: {
      type: Function,
      default: function (row) {
        return true;
      },
    },
  },
  data() {
    return {
      refreshKey: new Date().getTime(),
    };
  },
  methods: {
    // 开启单选
    selectRow(val, row) {
      // this.$refs.table.clearSelection();
      // this.$refs.table.toggleRowSelection(row, true);
      // this.$emit("handleSelectionChange", [{ ...row }]);
    },
    clearSelection() {
      this.$refs.table.clearSelection();
    },
    handleRowClick(row, event, column) {
      this.$emit("row-click", row, event, column);
    },
    handleSelectionChange(val) {
      this.$emit("selection-change", val);
    },
    handleRowDbClick(val) {
      this.$emit("db-click", val);
    },
    handleExpandChange(row, expandedRows) {
      this.$emit("expand-change", row, expandedRows);
    },
    handleCurrentChange(val) {
      this.$emit("current-change", val);
    },
    handleSetCurrent(row) {
      this.$refs.table.setCurrentRow(row);
    },
    setScrollTop(top) {
      this.$refs.table.bodyWrapper.scrollTop = top;
    },
    getScrollTop() {
      return this.$refs.table.bodyWrapper.scrollTop;
    },
    getScrollHeight() {
      return this.$refs.table.bodyWrapper.scrollHeight;
    },
    doLayout() {
      this.$nextTick(() => {
        this.refreshKey = new Date().getTime();
        this.$refs.table.doLayout();
      });
    },
    tableRowClassName({ row, rowIndex }) {
      this.$emit("tableRowClassName", row, rowIndex);
    },
    getRowKey(row) {
      return row[this.rowKey];
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      return {
        height: "40px",
        paddingTop: "5px",
        paddingBottom: "5px",
        fontSize: "14px",
      };
    },
    headerCellStyle({ row, rowIndex }) {
      return {
        background: "#ebf0f5",
        color: "#525b63",
        "font-weight": "bold",
        "font-size": "14px",
        borderColor: "#dee4ed",
      };
    },
    rowStyle({ row, rowIndex }) {
      //  单行灰色双行白色
      if (rowIndex % 2 !== 0) {
        return {
          background: "#F8F9FC",
        };
      }
    },
    toggleRowSelection(row) {
      this.$refs.table.toggleRowSelection(row);
    },
    setCurrentRow(row) {
      this.$refs.table.setCurrentRow(row);
    },
  },
};
</script>
<style lang="scss" scoped>
.table {
  width: 100%;
  height: 100%;
}
.table /deep/.el-table th.gutter {
  display: table-cell !important;
}

.table /deep/.el-table colgroup.gutter {
  display: table-cell !important;
}

.table
  /deep/
  .el-table__header-wrapper
  > table
  > thead
  > tr
  > th:first-child
  > div {
  display: none !important;
}
</style>
